<template>
  <view @click.stop="onClick">
    <view class="container" >
      <image class="img" :src="imgSrc" mode="aspectFill" />
      <view class="text-box">
        <view
          v-if="title"
          class="title"
          :class="{ 'max-line-one': !isProduct, 'max-line-two': isProduct }"
          >{{ title }}
        </view>
        <view class="subtitle">
          <text v-if="subtitle" class="content">{{ subtitle }}</text>
          <block v-if="isProduct && info.salePrice"
            ><text class="sale-price">¥{{ info.salePrice }}</text
            ><text class="rise">起</text>
            <text
              class="cross-line-price"
              v-if="info.marketPrice !== null && info.marketPrice !== ''"
              >¥{{ info.marketPrice }}</text
            >
          </block>
          <block v-if="mode == 'shareDSP'">
            <text class="sale-price">¥{{ info.dspUnitPrice }}</text>
          </block>
          <!-- <view
            v-if="mode == 'poi'"
            class="btn-txt"
            :data-spmCntSuffix="'ChatAiPage.poiCard@1.more'"
            :data-custom="1"
            :data-spm="1"
            >查看详情</view
          > -->
          <view
            v-if="mode == 'aiPhoto'"
            class="btn-txt"
            :data-spmCntSuffix="'ChatAiPage.aiGc@1.more'"
            :data-custom="1"
            :data-spm="1"
            >免费体验AI写真权益👉🏻</view
          >
        </view>
      </view>
    </view>
    <view
      class="buy-btn"
      v-if="mode == 'poi' || mode == 'product' || mode == 'shareDSP'"
      :data-spmCntSuffix="'ChatAiPage.poiCard@1.buy'"
      :data-custom="1"
      >立即购买</view
    >
  </view>
</template>

<script>
export default {
  props: {
    mode: {
      /// poi 或者 article 或者 product
      type: String,
      default: "poi",
      required: true,
    },
    info: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    async onClick() {
      if (this.mode == "poi") {
        uni.navigateTo({
          url: '/ai/pages/POIDetail/index?poiId=' + this.poi.poiId + '&distributionProductId=' + (this.poi.distributionProductId || '')
        })
      } else if (this.mode == "product") {
        const { productId, productTypeId, poiId, supplierProductId, toType, rpId, isCalendarHotel } = this.info
        const param = { productId, productType: productTypeId, poiId, supplierProductId, toType, rpId, isCalendarHotel, distributionProductId:this.info.distributionProductId || '' }
        this.$productUrlJump(param, true);
      } else if (this.mode == "aiPhoto") {
        if (!this.$isLogin()) {
          return;
        }
        let res = await this.$aiRequest({
          url: "/ai/travelAgency/judgeAiPhotoEquity",
          method: "POST",
        });
        if (res.success) {
          this.$navTo(
            "/packageUserCenter/pages/aigc/aiPhotoDetail",
            {
              packageId: this.info.packageId,
              packageName: this.info.packageName,
            },
            "navigateTo"
          );
        } else {
          this.$emit("sureClick", {
            type: "aiPhoto",
            txt: res.errMsg,
          });
        }
      }else if (this.mode == "shareDSP") {
        const { dspId } = this.info
        const param = { productType:'shareDSP',dspId, distributionProductId:this.info.distributionProductId || '' }
        this.$productUrlJump(param);
      }  else {
        uni.navigateTo({
          url: '/ai/pages/notedetails/notedetails?articleId=' + this.info.articleId
        })
      }
    },
  },
  computed: {
    imgSrc() {
      if (this.mode == "poi") {
        return this.info.coverImage;
      } else if (this.mode == "product" || this.mode == "shareDSP") {
        return this.info.mainPictureUrl;
      } else if (this.mode == "aiPhoto") {
        return this.info.coverUrl;
      } else {
        return this.info.coverImageUrl;
      }
    },
    title() {
      if (this.mode == "poi") {
        return this.info.poiName;
      } else if (this.mode == "product") {
        return this.info.productName;
      } else if (this.mode == "aiPhoto") {
        return this.info.packageName;
      } else if (this.mode == "shareDSP"){
        return this.info.dspTitle;
      }
      else {
        return this.info.articleTitle;
      }
    },
    subtitle() {
      return this.info.introduction;
    },
    isProduct() {
      return this.mode == "product";
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: row;
  padding: 10rpx;
  background: #ffffff;
  width: 454rpx;
  margin: 10rpx auto 0 auto;
  border-radius: 16rpx;
  .img {
    width: 114rpx;
    height: 114rpx;
    border-radius: 10rpx;
    flex-shrink: 0;
  }

  .text-box {
    margin-left: 20rpx;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;

    .max-line-one {
      @include maxLine(1);
    }

    .max-line-two {
      @include maxLine(2);
    }

    .title {
      margin-bottom: 14rpx;
      color: #4d566a;

      font: {
        size: 28rpx;
        weight: 600;
        color: $sl-color-dark-grey;
      }
    }

    .subtitle {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      // flex-grow: 1;
      margin-bottom: 8rpx;

      .content {
        @include maxLine(2);
        flex-grow: 1;
        font-size: 26rpx;
        font-weight: 400;
        color: #848891;
        line-height: 34rpx;
        line-break: anywhere;
      }

      .sale-price {
        font-size: 28rpx;
        color: $sl-color-price;
        line-height: 20rpx;
      }

      .rise {
        margin-left: 3rpx;
        font-size: 20rpx;
        color: $sl-color-light-grey;
        line-height: 20rpx;
      }

      .cross-line-price {
        margin-left: 13rpx;
        font-size: 20rpx;
        color: $sl-color-light-grey;
        line-height: 20rpx;
        text-decoration: line-through;
      }

      .icon {
        flex-shrink: 0;
      }
    }
  }
}
.btn-txt {
  color: #b5b5d2;
  font-size: 20rpx;
}
.buy-btn {
  width: 454rpx;
  height: 68rpx;
  background: #7696ff;
  border-radius: 34rpx;
  margin: 0 auto;
  font-size: 28rpx;
  text-align: center;
  line-height: 68rpx;
  margin-top: 24rpx;
  color: #FFFFFF;
}
</style>
